<template>
	<div id="app" >
		<keep-alive>
			<router-view v-if='$route.meta.keepAlive' include="MarketIndex" />
		</keep-alive>
		<router-view  v-if='!$route.meta.keepAlive'/>

		<van-tabbar v-model="active" @change="onChange"  id="tabbar">
			<van-tabbar-item>
				<span class="footWord"> {{$t('message.home')}}</span>
				<template #icon="props">
					<img :src="props.active ? icon.first[0] : icon.first[1] " class="footImg" />
				</template>
			</van-tabbar-item>
			<van-tabbar-item>
				<span class="footWord">{{$t('message.category')}}</span>
				<template #icon="props">
					<img :src="props.active ? icon.secnod[0] : icon.secnod[1] " class="footImg" />
				</template>
			</van-tabbar-item>
			
			<van-tabbar-item @click="showQr">
				<span class="footWord" style="color: #fff!important;">{{$t('message.qrCode')}}</span>
				<template #icon="props">					
					<img :src="icon.five[1]" class="footImg" />
				</template>
			</van-tabbar-item>
			
			
			<van-tabbar-item>
				<span class="footWord">{{$t('message.news')}}</span>
				<template #icon="props">
					<img :src="props.active ? icon.three[0] : icon.three[1] " class="footImg" />
				</template>
			</van-tabbar-item>
			<van-tabbar-item>
				<span class="footWord">{{$t('message.about')}}</span>
				<template #icon="props">
					<img :src="props.active ? icon.four[0] : icon.four[1] " class="footImg" />
				</template>
			</van-tabbar-item>
		</van-tabbar>
		
		<div class="connect" @click="changeLang">
			<img src="/img/lang.png" alt="" />
		</div>
		
		<van-popup
		  v-model="langShow"
		  position="bottom"
		>	
			<van-picker
			  :title="$t('message.chooseLanguage')"
			  show-toolbar
			  :confirm-button-text="$t('message.confirm')"
              :cancel-button-text="$t('message.cancel')"
			  :columns="columns"
			  @confirm="onConfirm"
			  @cancel="onCancel"
			/>		
		</van-popup>
		
		
		<van-popup
		  v-model="qrShow"
		  position="right"
		  :style="{ height: '100%',width:'100%' }" :overlay="false"
		  class="qrShow"
		>	
	       <van-nav-bar
			  :title="$t('message.qrCode')"
			  left-arrow
			  @click-left="onClickLeft"
           />           
           <div class="qr_content">
           	  <div class="wrap">           	  	
           	  	<div class="qr_content_img">
           	  		<img :src="imgUrl" alt="" />
           	  	</div>           	  	
           	  	<div class="tips">{{$t('message.qrTips')}}</div>           	  	
           	  </div>
           </div> 
		</van-popup>		
		
	</div>
</template>
<script>
	import bus from '@/api/bus'	
	export default {
		data() {
			return {	
				imgUrl:'',
				qrShow:false,
				columns:[{ text: '中文', val: 'zh' }, { text: 'english', val: 'en' },{ text: '日本語', val: 'jap' }],
				langShow:false,
				active: 0,
				icon: {
					first: ['/img/btn_home_sel.png', '/img/btn_home.png'],
					secnod: ['/img/btn_mtc_sel.png', '/img/btn_mtc.png'],
					three: ['/img/btn_news_sel.png', '/img/btn_news.png'],
					four: ['/img/btn_us_sel.png', '/img/btn_us.png'],
					five:['/img/btn_qrcode_sel.png','/img/btn_qrcode.png']
				}
			}
		},
        watch:{
        	'$route':'getPath'
        },
		methods: {
			onClickLeft(){			   
			   this.getPath()
			   this.qrShow=false
			},
			onConfirm(result){
				this.$i18n.locale=result.val
				this.langShow=false
			},
			onCancel(){
				this.langShow=false
			},
			// 切换语言
			changeLang(){
				this.langShow=true
			},
			getPath(){
				let hash = window.location.pathname				
				if(hash == '/product') {
					this.active = 1
				} else if(hash == '/') {
					this.active = 0
				} else if(hash == '/news') {
					this.active = 3
				} else if(hash == '/about') {
					this.active = 4
				}				
			},
			showQr(){
				this.qrShow=true
			},
			onChange(index) {
				switch(index) {
					case 0:					    
						this.$router.push({
							path: '/'
						})
						break;
					case 1:					   
						this.$router.push({
							path: '/product'
						})
						break;					
					case 3:					    
						this.$router.push({
							path: '/news'
						})
						break;
					case 4:					    
						this.$router.push({
							path: '/about'
						})
						break;
				}

			}
		},
		mounted() {
            this.getPath()
    		this.$Axios.Get(this.$baseUrl+'contact_info/list').then(res => {
    		    this.imgUrl=res[0].uploadFile.fileUrl
    		})            
		}
	}
</script>


<style scoped="" lang="scss">
	/*.qr_content{height: 300px;width: 90%;position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: red;}*/
	.qr_content{flex: 1;display: flex;align-items: center;justify-content: center;background: #f8f8f8;
	   .wrap{
	   	 width: 90%;background: #fff;border-radius: 8px;padding:20px;
	   	 .qr_content_img{
	   	 	img{width: 100%;}
	   	 }
	   	 .tips{text-align: center;margin-top: 20px;font-size: 14px;color: #ccc;}
	   }
	
	}
	.data_info{font-size: 16px!important;padding: 20px 10px;
	  img{width: 100%!important;height: auto;}
	}	
</style>
<style lang="scss">
	
	/*@media screen and (device-width:375px) and (device-height:812px){
	    #tabbar {
	      margin-bottom:34px;
	    }
	}*/
	/* 适配iphoneXR iphoneXSMax */
	/*@media screen and (device-width:414px) and (device-height:896px){
	    #tabbar {
	      margin-bottom:34px;
	    }
	}*/

	
	.footImg {
		width: 30px!important;
		height: 30px!important;
	}
    .van-nav-bar	{display: flex;align-items: center;}
    .van-nav-bar .van-icon{color: #333;}    
	.footWord {
		font-size: 10px;
	}
	.van-tabbar-item--active {
	    color: #1989fa;
	    background-color: transparent;
	}
    .van-nav-bar__content{width: 100%;}	
	.van-tabbar {
		background: #000;
	}
	
	body {
		margin: 0;
		font-family: 'PingFangSC', 'helvetica neue', 'hiragino sans gb', 'arial', 'microsoft yahei ui', 'microsoft yahei', 'simsun', 'sans-serif'!important;
		background-color: #fff;
	}
    .connect{position: fixed;bottom: 70px;right:20px;z-index: 100;
       img{width: 60px;height: 60px;}
    }
    .qrShow{margin-top: -1px;display: flex;flex-direction: column;}

</style>